.wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.img{
  width: 300px;
  height: 300px;
  background-color: #000;
  background-image: url('../../assets/image.jpg');
  background-size: 300px 300px;
  background-repeat: no-repeat;
}
.img[zoomed]{
  background-size: 900px 900px;
  background-position: calc(var(--x) * 100%) calc(var(--y) * 100%);
}